<template>
	<view :style="{'height':minH}">
		<view class="cart-list">
			<view class="info" v-if="list.length > 0 && hasLogin" :style="{'height':(winH-btnBoxH)+'px'}">
				<view class="cart-info">
					<view>
						<text>支持配送地区：</text>
					</view>
					<view>
						<text>点击"去结算"，选择地址后，即可切换价格</text>
					</view>
				</view>
				<checkbox-group @change="seletedStatus" checked>
				<view class="list-item" v-for="(item,index) in list" :key="index">
					<view class="good-title .border-bottom">
						{{item.title}}
					</view>
					<view class="good-detail">
						<view class="good-box">
							<view class="box-left">
								<view class="">
									<checkbox :value="item.id" :checked="selectList.indexOf(item.id) > -1" style="transform:scale(0.8)"/>
								</view>
								<view class="">
									image
								</view>
							</view>
							<view class="box-detail">
								<view class="good-name">
									<view class="name">
										<text>{{item.goods_name}}</text>
									</view>
									<view class="icon">
										x
									</view>
								</view>
								<view class="spec">
									<text>{{item.attr}}</text>
								</view>
								<!-- <view class="sku">
									<text>{{item.sku}}</text>
								</view> -->
								<view class="good-price">
									<view class="price">
										<text>{{item.cart_price}}</text>
									</view>
									<view class="num">
										<uni-number-box v-model="item.num" @change="handleChangeNumber(item)"/>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				</checkbox-group>
				<!-- 描述start -->
				<view class="good-ext">
					<view class="ext-icon">
						a
					</view>
					<view class="ext">
						<view class="ext-title">
							商品价格变化
						</view>
						<view class="ext-value">
							为第一时间提供心仪商品
						</view>
					</view>
				</view>
				<!-- 描述end -->
				<!-- 描述start -->
				<view class="good-return">
					<view class="ext-icon">
						a
					</view>
					<view class="ext">
						<view class="ext-title">
							商品价格变化
						</view>
						<view class="ext-value">
							为第一时间提供心仪商品
						</view>
					</view>
				</view>
				<!-- 描述end -->
			</view>
			<view class="info-btn" v-if="list.length > 0 && hasLogin">
				<view class="btn-box">
					<view class="box-left">
						<checkbox :checked="seletedAll" @tap="_seletedAll" style="transform:scale(0.8)">全选</checkbox>
					</view>
					<view class="pay-btn">
						<view class="pay-price">
							<view class="total-price">
								￥{{totalPrice}}
							</view>
							<view class="total-price-notice">
								不含运费
							</view>
						</view>
						<view class="">
							<button type="default" class="wss-btn" @click="handleSettlement">去结算</button>
						</view>
					</view>
				</view>
			</view>
			
			<view class="no-data" v-if="list.length == 0 || !hasLogin">
				<view class="title-icon">
					<image src="../../static/images/icon/icon-bag.png" mode=""></image>
				</view>
				<view class="">
					<text>您的购物袋暂无商品</text>
				</view>
				<view class="notice notice-desc" v-if="!hasLogin">
					<text>登录您的账户</text>
				</view>
				<view class="notice" v-if="!hasLogin">
					<text>即可在所有设备同步更新购物袋</text>
				</view>
				<view class="login-flag" v-if="!hasLogin" @click="invokeLogin">
					<text>去登录</text>
					<image src="../../static/images/icon/icon-right.png" mode="widthFix"></image>
				</view>
				<view class="go-shopping" v-if="hasLogin">
					<button type="default" class="wss-btn" @click="doInvoke">开始购物</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getCartList} from '@/api/cart.js'
	import {globalMixin} from '@/util/globalMixin.js'
	export default {
		mixins:[globalMixin],
		data() {
			return {
				winH: 0,
				btnBoxH: 0,
				seletedAll: false,
				selectList: [],
				list: [
					{
						id:"1",
						goods_name: 'SIXONE 毛衣女2017秋冬新款宽松韩版潮套头V领学生长袖港味针织衫',
						image: '',
						name: 'Jcquemus',
						attr: '短款寸衫',
						cart_price: '￥3.50',
						ori_price: '3.50',
						num: 1,
						sku: '34'
					}
				],
				hasLogin: true
			}
		},
		mounted() {
			this.initH()
		},
		onShow() {
			this.initLoginUser()
		},
		methods: {
			initLoginUser() {
				// 初始化登陆了用户
				let user = this.getTokenUser()
				if(this.validateToken() && user && user.member_id) {
					this.hasLogin = true
					// 初始化购物车
					this.getCartList()
				} else {
					this.hasLogin = false
					this.list = []
				}
			},
			getCartList() {
				// 获取购物车列表
				getCartList().then(res=> {
					if(res.code == 0) {
						//this.list = res.data.cart_list || []
					}
				})
			},
			handleChangeNumber(item) {
				// 请求后台修改数量
				console.log(item)
			},
			seletedStatus(e) {
				this.selectList = e.detail.value
				console.log(this.selectList)
				if (this.selectList.length === this.list.length) {
					this.seletedAll = true
				}
			},
			_seletedAll(){
				if(!this.seletedAll){
					this.seletedAll=true
					this.list.map(item=>{
						this.selectList.push(item.id)
					})
					console.log(this.selectList)
					console.log('true')
				}else{
					this.seletedAll=false
					this.selectList=[]
					console.log('false')
				}
			},
			handleSettlement() {
				// 去结算
				uni.navigateTo({
					url:"/pages/cart/settlement"
				})
			},
			invokeLogin() {
				// 跳转你登录
				uni.navigateTo({
				    url: '/pages/user/login'
				});
			},
			doInvoke() {
				// 跳转首页
				uni.switchTab({
				   url: '/pages/index/index',
					success() {
						var page = getCurrentPages().pop(); 
						page.onLoad(); 
					}
				});
			},
			initH () {
				let _self = this
				uni.getSystemInfo({
				    success: function (res) {
						_self.winH = res.windowHeight
				    }
				});
				let autoScroll1 = uni.createSelectorQuery().select('.info-btn')
				autoScroll1.boundingClientRect(z => {
					if(z && z.height) {
						_self.btnBoxH = z.height
					}
				}).exec()
			}
		},
		computed: {
			minH: function(){
				return this.winH+"px"
			},
			totalPrice: function() {
				let result = 0
				this.list.forEach(item=>{
					if(this.selectList.indexOf(item.id) != -1) {
						result+=parseFloat(item.ori_price)
					}
				})
				return result
			}
		}
	}
</script>

<style scoped lang="scss">
.info {
	overflow-y: auto;
	background-color: #f5f5f5;
}
.cart-list {
	.cart-info {
		padding: 20rpx 0;
		font-size: 28rpx;
		text-align: center;
	}
	.list-item {
		padding: 20rpx 40rpx;
		margin-bottom: 20rpx;
		background-color: #ffffff;
		.good-title {
			padding: 20rpx 0 40rpx 0;
		}
		.good-detail {
			padding: 40rpx 0 20rpx 0;
			.good-box {
				display: flex;
				.box-left {
					width: 30%;
					max-width: 300rpx;
					display: flex;
					align-items: center;
				}
				.box-detail {
					width: 70%;
					.good-name {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-weight: 550;
					}
					.spec {
						margin-top: 10rpx;
					}
					.sku {
						margin-top: 10rpx;
					}
					.good-price {
						margin-top: 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-weight: 550;
					}
				}
			}
		}
	}
	.good-ext{
		margin-top: 10rpx;
		padding: 40rpx;
	}
	.good-return {
		padding: 20rpx 40rpx 40rpx 40rpx;
	}
	.good-ext,.good-return {
		background-color: #ffffff;
		display: flex;
		.ext-icon {
			image {
				width: 48rpx;
				height: 48rpx;
			}
		}
		.ext {
			.ext-value {
				margin-top: 10rpx;
			}
		}
	}
}
.info-btn {
	position: absolute;
	bottom: 0;
	width: 100%;
	background-color: #ffffff;
	.btn-box {
		padding: 20rpx 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		button {
			width: 200rpx;
			background-color: black;
			color: #ffff;
			font-size: 30rpx;
		}
		.pay-btn {
			display: flex;
			align-items: center;
			.pay-price {
				text-align: right;
				margin-right: 20rpx;
				.total-price {
					font-weight: 550;
				}
				.total-price-notice {
					font-size: 28rpx;
					color: #949494;
				}
			}
		}
	}
}
.no-data {
	width: 100%;
	text-align: center;
	.title-icon {
		margin-bottom: 10rpx;
		image {
			height: 64rpx;
			width: 64rpx;
		}
	}
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	.notice {
		font-size: 28rpx;
	}
	.notice-desc {
		margin-top: 40rpx;
	}
	.login-flag {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		margin-top: 100rpx;
		image {
			width: 48rpx;
			height: 48rpx;
		}
	}
	.go-shopping {
		margin-top: 100rpx;
	}
}
</style>
